<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 320px;
            height: 320px;
            border: 1px solid black;
            position: relative;
            float: left;
        }
        .slide{
            width: 80px;
            height: 80px;
            background-color: yellow;
            opacity: 0.6;     

            position: absolute;   
            top: 0;
            left: 0;
        }
        .container>img{
            width: 100%;
            height: 100%;
        }
        .detail{
            width: 300px;
            height: 300px;
            border:1px solid black;
            float: right;
            background:url(./images/banner1.jpg) no-repeat 0 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="./images/banner1.jpg" alt="">
        <div class="slide"></div>
    </div>
    <div class="detail"></div>

    <script>
        var container = document.querySelector(".container");
        var slide = document.querySelector(".slide");
        var detail = document.querySelector(".detail");

        // 获取容器的宽高
        var parentWidth = +getComputedStyle(container).width.slice(0,3);
        var parentHeight = +getComputedStyle(container).height.slice(0,3);
        
        // 获取滑块的宽高
        var slideWidth = +getComputedStyle(slide).width.slice(0,2);
        var slideHeight = +getComputedStyle(slide).height.slice(0,2);

        // 显示图片放大盒子的宽高
        var detailWidth = +getComputedStyle(detail).width.slice(0,3);
        var detailHeight = +getComputedStyle(detail).height.slice(0,3);

        // 比例 = 大滑块/小滑块 
        var calc = detailWidth/slideWidth;// 

        // 所以大图片 = 小图片 * 比例
        var bgw = parentWidth*calc;
        var bgh = parentHeight*calc;

        detail.style.backgroundSize= bgw+"px "+bgh+"px";


        // 滑块能到达最大的left值
        var maxLeft = parentWidth - slideWidth;
        // 滑块能到达最大的top值
        var maxTop = parentHeight - slideHeight;
        

        // 绑定鼠标事件
        container.addEventListener("mousemove",fn);

        function fn(e){
            // 获取滑块左上角x坐标的值
            var offsetX = e.pageX - container.offsetLeft;
            // 获取滑块左上角y坐标的值
            var offsetY = e.pageY - container.offsetTop;

            
            // 使滑块左边向左移动本身宽度的一半 
            offsetX = offsetX - 40;
            // 使滑块上边向上移动本身高度的一半
            offsetY = offsetY - 40;

            // 不让方框超出父元素边框
            offsetX = offsetX <0 ? 0: offsetX >maxLeft ? maxLeft:offsetX ;
            offsetY = offsetY <0 ? 0: offsetY >maxTop ? maxTop:offsetY ;
            // offsetX = offsetX >240 ? 240:offsetX ;
            // offsetY = offsetY >240 ? 240:offsetY ;

            // 使方框随鼠标移动而移动
            slide.style.cssText = "left:"+offsetX+"px;"+"top:"+offsetY+"px;";

            // 让右边的大图片跟随小滑块反向移动
            detail.style.backgroundPosition= -offsetX*calc+"px "+ -offsetY*calc+"px";
        }

    </script>
</body>
</html>